<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    /*
     * 页面初始化
     *
     * */
    function GetQueryString (name) {
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if(r!=null)return  unescape(r[2]); return null;
    }

    sessionStorage.setItem("token",GetQueryString('token'));
    sessionStorage.setItem("isFirst",GetQueryString('isFirst'));
    sessionStorage.setItem("device",GetQueryString('device'));
    sessionStorage.setItem("upload",GetQueryString('upload'));
    const origin = window.location.origin;
    if(GetQueryString('upload') == 'true') {
      window.location.href = origin + '#/upload';
    } else {
      window.location.href = origin;
    }

  </script>

  <style>
    body,html{
      height: 100%;
      overflow: hidden;
      margin: 0;
    }
    .loader{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      position: relative;
    }
    .circular {
      -webkit-animation: rotate 2s linear infinite;
      animation: rotate 2s linear infinite;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      width: 30px;
      height: 30px;
    }
    .path {
      stroke-dasharray: 1,200;
      stroke-dashoffset: 0;
      -webkit-animation: dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;
      animation: dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;
      stroke-linecap: round;
    }

    @keyframes rotate{
      100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
      }
    }
    @keyframes color{
      0%, 100% {
        stroke: #5e85c8;
      }
      40% {
        stroke: #623db6;
      }
      66% {
        stroke: #008744;
      }
      80%, 90% {
        stroke: #ffa700;
      }
    }
    @keyframes dash{
      0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
      }
      100% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
      }
    }
  </style>
</head>
<body>
<div class="loader">
  <svg class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
  </svg>
</div>
</body>
</html>
